import { ReactNode } from 'react'
import { useNavigate, useLocation } from 'react-router-dom'
import { Plus, Home, User, Columns, BarChart3 } from 'lucide-react'
import FloatingAIBall from './FloatingAIBall'

interface LayoutProps {
  children: ReactNode
}

export default function Layout({ children }: LayoutProps) {
  const navigate = useNavigate()
  const location = useLocation()

  const isActive = (path: string) => location.pathname === path

    return (
    <div className="min-h-screen bg-slate-50">
      {/* 主内容区域 */}
      <main className="pb-20">
        {children}
      </main>

      {/* 悬浮AI助手 */}
      <FloatingAIBall />

      {/* 底部导航栏 */}
      <nav className="fixed bottom-0 left-0 right-0 bg-white/95 backdrop-blur-sm border-t border-slate-200/60 shadow-lg z-50">
        <div className="flex justify-around items-center py-2 px-1 sm:py-3 sm:px-2 max-w-sm mx-auto sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl">
          <button
            onClick={() => navigate('/')}
            className={`relative flex flex-col items-center p-2 sm:p-3 rounded-xl transition-all duration-200 touch-manipulation ${
              isActive('/') || location.pathname.startsWith('/recurring')
                ? 'text-blue-600 bg-blue-50 shadow-sm' 
                : 'text-slate-500 hover:text-slate-700 hover:bg-slate-100'
            }`}
          >
            <Home size={16} className="sm:w-5 sm:h-5" />
            <span className="text-xs sm:text-sm mt-0.5 font-medium">任务</span>
            {(isActive('/') || location.pathname.startsWith('/recurring')) && <div className="absolute -bottom-1 w-5 h-0.5 bg-blue-600 rounded-full"></div>}
          </button>
          
          <button
            onClick={() => navigate('/kanban')}
            className={`relative flex flex-col items-center p-2 sm:p-3 rounded-xl transition-all duration-200 touch-manipulation ${
              isActive('/kanban')
                ? 'text-purple-600 bg-purple-50 shadow-sm' 
                : 'text-slate-500 hover:text-slate-700 hover:bg-slate-100'
            }`}
          >
            <Columns size={16} className="sm:w-5 sm:h-5" />
            <span className="text-xs sm:text-sm mt-0.5 font-medium">看板</span>
            {isActive('/kanban') && <div className="absolute -bottom-1 w-5 h-0.5 bg-purple-600 rounded-full"></div>}
          </button>
          
          <button
            onClick={() => navigate('/create')}
            className="relative flex flex-col items-center p-1.5 group touch-manipulation"
          >
            <div className="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 rounded-2xl flex items-center justify-center -mt-4 shadow-lg hover:shadow-xl transition-all duration-200 hover:scale-105">
              <Plus size={16} className="text-white sm:w-5 sm:h-5" />
            </div>
            <span className="text-xs sm:text-sm mt-1 font-medium text-slate-700">新建</span>
          </button>
          
          <button
            onClick={() => navigate('/stats')}
            className={`relative flex flex-col items-center p-2 sm:p-3 rounded-xl transition-all duration-200 touch-manipulation ${
              isActive('/stats') 
                ? 'text-green-600 bg-green-50 shadow-sm' 
                : 'text-slate-500 hover:text-slate-700 hover:bg-slate-100'
            }`}
          >
            <BarChart3 size={16} className="sm:w-5 sm:h-5" />
            <span className="text-xs sm:text-sm mt-0.5 font-medium">统计</span>
            {isActive('/stats') && <div className="absolute -bottom-1 w-5 h-0.5 bg-green-600 rounded-full"></div>}
          </button>
          
          <button
            onClick={() => navigate('/profile')}
            className={`relative flex flex-col items-center p-2 sm:p-3 rounded-xl transition-all duration-200 touch-manipulation ${
              isActive('/profile') || isActive('/settings')
                ? 'text-blue-600 bg-blue-50 shadow-sm' 
                : 'text-slate-500 hover:text-slate-700 hover:bg-slate-100'
            }`}
          >
            <User size={16} className="sm:w-5 sm:h-5" />
            <span className="text-xs sm:text-sm mt-0.5 font-medium">我的</span>
            {(isActive('/profile') || isActive('/settings')) && <div className="absolute -bottom-1 w-5 h-0.5 bg-blue-600 rounded-full"></div>}
          </button>
        </div>
      </nav>
    </div>
  )
}
